<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-title">待付款订单</view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view 
        v-for="order in orders" 
        :key="order.id"
        class="order-card"
      >
        <!-- 订单时间和金额 -->
        <view class="order-header">
          <view class="order-time">{{ formatDate(order.orderTime) }}</view>
          <view class="order-amount">￥{{ order.amount.toFixed(2) }}</view>
        </view>

        <!-- 司机信息 -->
        <view class="driver-info">
          <image :src="order.driverAvatar" class="driver-avatar" />
          <view class="driver-details">
            <view class="driver-name">{{ order.driverName }}</view>
            <view class="driver-car">车牌号：{{ order.carPlate }}</view>
          </view>
        </view>

        <!-- 出发地和目的地 -->
        <view class="location">
          <view class="start-location">出发地：{{ order.startLocation }}</view>
          <view class="end-location">目的地：{{ order.endLocation }}</view>
        </view>

        <!-- 付款按钮 -->
        <view class="payment-button">
          <button @click="handlePayment(order.id)">立即付款</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      orders: [
        {
          id: 1,
          amount: 100.00,
          orderTime: '2024-09-05T08:30:00',
          driverAvatar: '/static/images/1.jpg',
          driverName: '张师傅',
          carPlate: '闽F12345',
          startLocation: '龙岩学院',
          endLocation: '意境水汇'
        },
        {
          id: 2,
          amount: 250.75,
          orderTime: '2024-09-06T09:00:00',
          driverAvatar: '/static/images/2.jpg',
          driverName: '李师傅',
          carPlate: '沪B67890',
          startLocation: '上海市浦东新区',
          endLocation: '上海市静安区'
        }
      ]
    };
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${hours}:${minutes}`;
    },
    handlePayment(orderId) {
      // 处理付款逻辑
      uni.showModal({
        title: '付款确认',
        content: `确认支付订单 ${orderId} 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 移除已支付的订单
            this.orders = this.orders.filter(order => order.id !== orderId);
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.container {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.order-list {
  display: flex;
  flex-direction: column;
}

.order-card {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #fff;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.order-time, .order-amount {
  font-size: 16px;
  color: #333;
}

.order-amount {
  font-weight: bold;
}

.driver-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.driver-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.driver-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.driver-name {
  font-size: 16px;
  color: #333;
}

.driver-car {
  font-size: 14px;
  color: #666;
}

.location {
  margin-bottom: 10px;
}

.start-location, .end-location {
  font-size: 16px;
  color: #333;
}

.payment-button {
  text-align: right;
}

button {
  background-color: #007aff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
}
</style>
